<template>
	<view class="container">
		<view class="rank-container">
			<view class="rank">
				<text>全市目前排名18名</text>
				<view class="rankbtn">
					<button size="mini">省排名</button>
					<button class="active" size="mini">市排名</button>
					<button size="mini">区排名</button>
				</view>
			</view>
			<view class="rankEchart">
				<echarts ref="echarts" :option="option3" canvasId="echarts3"></echarts>
			</view>
		</view>
		<view class="echart-container">
			<view class="top_title">
				<text>数据详情</text>
			</view>
			<view class="echarts">
				<echarts ref="echarts" :option="option" canvasId="echarts"></echarts>
			</view>
			<view class="top_title">
				<text>数据排名</text>
			</view>
			<view class="echarts">
				<echarts ref="echarts" :option="option2" canvasId="echarts2"></echarts>
			</view>
		</view>
		<view class="table-container">
			<view class="top_title">
				<text>详情查看</text>
			</view>
			<view class="detail">
				<uni-table>
					<uni-tr>
						<uni-th width="250rpx" align="center">城市</uni-th>
						<uni-th width="110rpx" align="center">排名</uni-th>
						<uni-th width="150rpx" align="center">参与率</uni-th>
						<uni-th width="110rpx" align="center">详细</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td align="center">{{ item.deptName }}</uni-td>
						<uni-td align="center">
							<view>{{ index+1 }}</view>
						</uni-td>
						<uni-td align="center">{{ item.partakeRate }}</uni-td>
						<uni-td align="center"><text @click="clickDetail(item)">查看</text> </uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
	</view>
</template>

<script>
	import echarts from '@/components/echarts-uniapp/echarts-uniapp.vue';
	import {getRate} from '@/api/dashboard/dashboard.js'
	export default {
		data() {
			return {
				option: {},
				option2: {},
				option3: {},
				tableData: [],
				echartData: {
					yData: [],
					xData: [],
				},
				active:{

				}
			}
		},
		// 注册组件
		components: {
			echarts
		},
		onLoad(e) {
			this.active = e
		},
		onReady() {

				
				this.option3 = {
					title: {
						text: '70%',
						left: 'center',
						top: 32,
						textStyle: {
							color: '#5E5E5E'
						}
					},
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line', 'bar']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					calculable: true,
					tooltip: { //提示框组件
						show:false,
						trigger: 'item', //触发类型(饼状图片就是用这个)
						formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框浮层内容格式器
					},
					series: [{
						name: '考试参与率',
						type: 'pie',
						data: [
							{ value: 60, itemStyle: { color: '#f1f1f1' } },
							{ value: 40, itemStyle: { color: '#39CFB4' } },
						],
						radius: ['60%', '80%'],
						label:{
							normal:{
								show:false
							}
						}
					}]
				}
				this.getData();
		},
		methods: {
			getData(){
				let data={
					activityId:this.active.activityId,
					deptId:this.active.deptId,
					deptIds:'',
					type:0
				}
				getRate(data).then(res=>{
					this.tableData = res.data
					for (var i = 0; i < res.data.length; i++) {
						this.echartData.yData.push( res.data[i].deptName)
						this.echartData.xData.push(res.data[i].partakeRate)
					}
				}).then(()=>{
					this.option = {
						toolbox: {
							show: true,
							feature: {
								mark: {
									show: true
								},
								dataView: {
									show: true,
									readOnly: false
								},
								magicType: {
									show: true,
									type: ['line', 'bar']
								},
								restore: {
									show: true
								},
								saveAsImage: {
									show: true
								}
							}
						},
						grid:{
								show:false,
								top:'10%',
								right:'5%',
								bottom:'18%',
								left:'10%'
						},
						calculable: true,
						xAxis: [{
							type: 'category',
							
							data: this.echartData.yData,
							axisLabel: {
								rotate: 60,
								textStyle: {
									color: '#979797',
									fontSize: 10
								}
							},
							axisLine: {
								show: true,
								lineStyle: {
									type: 'solid',
									color: '#D9D9D9',//左边线的颜色
									width: '1'//坐标线的宽度
								}
							},
							
						}],
						yAxis: [{
							type: 'value',
							axisLine: {
								show: true,
								minInterval:1,
								lineStyle: {
									type: 'solid',
									color: '#D9D9D9',//左边线的颜色
									width: '1'//坐标线的宽度
								}
							},
							splitLine: {
								show: false,
							}
						}],
						series: [{
							name: '考试参与率',
							type: 'bar',
							data: this.echartData.xData,
							barWidth: 8,
							itemStyle: {
								normal: {
									color: '#39CFB4',
									barBorderRadius: [10, 10, 10, 10], //依次表示 左上，右上，右下、左下
									label: {
										show: true, //开启显示
										position: 'top', //在上方显示
										textStyle: { //数值样式
											color: '#39CFB4',
											fontSize: 10
										}
									}
								}
					
							},
						}]
					}
					this.option2 = {
						toolbox: {
							show: true,
							feature: {
								mark: {
									show: true
								},
								dataView: {
									show: true,
									readOnly: false
								},
								magicType: {
									show: true,
									type: ['line', 'bar']
								},
								restore: {
									show: true
								},
								saveAsImage: {
									show: true
								}
							}
						},
						grid:{
								show:false,
								top:'10%',
								right:'5%',
								bottom:'10%',
								left:'25%'
						},
						calculable: true,
						yAxis: [{
							type: 'category',
							data: this.echartData.yData.reverse(),
							axisLabel: {
								textStyle: {
									color: '#979797',
									fontSize: 10
								}
							},
							axisLine: {
								show: true,
								lineStyle: {
									type: 'solid',
									color: '#D9D9D9', //左边线的颜色
									width: '1' //坐标线的宽度
								}
							},
					
						}],
						xAxis: [{
							type: 'value',
							axisLine: {
								show: true,
								minInterval: 1,
								lineStyle: {
									type: 'solid',
									color: '#D9D9D9', //左边线的颜色
									width: '1' //坐标线的宽度
								}
							},
							splitLine: {
								show: false,
							}
						}],
						series: [{
							name: '考试参与率',
							type: 'bar',
							data: this.echartData.xData.reverse(),
							barWidth: 8,
							itemStyle: {
								normal: {
									color: '#39CFB4',
									barBorderRadius: [10, 10, 10, 10], //依次表示 左上，右上，右下、左下
									label: {
										show: true, //开启显示
										position: 'top', //在上方显示
										textStyle: { //数值样式
											color: '#39CFB4',
											fontSize: 10
										}
									}
								}
					
							},
						}]
					}
				}					
				)
				this.loading=false
			},
			
			clickDetail(e) {
				this.$tab.navigateTo('/pages/work/datacenter/allClassData?deptId=' + e.deptId + '&activityId=' + this.active.activityId)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #6E89BE;
	}

	.container {
		width: calc(100vw - 40rpx);
		height: auto;
		margin: 0 auto;

		.rank-container {
			width: 100%;
			background-color: #fff;
			border-radius: 20rpx;
			display: flex;

			.rank {
				width: calc(100vw - 375rpx);
				padding: 20rpx;

				text {
					line-height: 80rpx;
					padding-left: 10rpx;
				}

				.rankbtn {
					display: flex;

					button {
						color: #fff;
						font-size: 20rpx;
						background-color: #D9D9D9;
						padding: 0 14rpx;
						border-radius: 10rpx;
					}

					.active {
						background-color: #39CFB4;
					}
				}
			}

			.rankEchart {
				width: 375rpx;
				height: 180rpx;
			}
		}

		.echart-container {
			.echarts {
				width: 100%;
				height: 850rpx;
				background-color: #fff;
				border-radius: 20rpx;
			}
		}

		.table-container {
			.detail {
				width: 100%;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 50rpx 40rpx;

				.uni-table {
					color: #fff;

					.uni-table-tr {
						background-color: #53AE9E;

						.uni-table-td {
							color: #fff !important;
							padding: 10rpx !important;
							border-bottom: 14rpx #fff solid !important;
						}

						.uni-table-th {
							color: #fff !important;
							border-bottom: 14rpx #fff solid !important;
						}
					}

					.uni-table-tr:nth-child(1) {
						background-color: #39CFB4;
					}
				}
			}
		}
	}

	.top_title {
		color: $uni-text-color-inverse;
		display: flex;
		line-height: 70rpx;
		padding-left: 20rpx;
		align-items: center;

		text {
			width: 550rpx;
		}
	}
</style>
